<style lang="scss" scoped>
.container {
  padding: 0 16px;
}

.el-select .el-select--small {
  display: block !important;
}

.el-card {
  height: 460px !important;
  padding: 20px !important;
}

.title {
  display: block;
  margin: 20px 0px;
  font-size: 18px;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.iccid_item {
  height: 40px;
  line-height: 40px;
}

.iccid_title {
  padding-left: 20px;
  width: 100px;
  text-align: right;
  display: inline-block;
}

.fl-right {
  width: 100%;
  text-align: right;
}
.assets-table /deep/.el-table__body-wrapper {
  height: calc(100% - 40px) !important;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>资源管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>ICCID查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
      <div class="search-box">
        <div class="search-item-box">
          <table>
            <tr>
              <td style="vertical-align: top">
                <i class="el-icon-search"></i>
              </td>
              <td class="search_td" style="width: 190px">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="baseParampters.iccid"
                  placeholder="ICCID"
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                ></el-input>
              </td>
              <td class="search_td" style="width: 190px; vertical-align: top">
                <el-select
                  class="handle-input mr10"
                  style="width: 190px"
                  v-model="baseParampters.iccidType"
                  placeholder="ICCID顺序"
                >
                  <el-option
                    v-for="item in orderList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </td>
              <td class="search_td" style="width: 190px; vertical-align: top">
                <el-button size="small" type="primary" @click="loadAllData()"
                  >一键查询
                </el-button>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <span class="title">ICCID解析</span>
      <el-card shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fl-right">
              <el-button
                size="small"
                type="primary"
                @click="loadTableData('iccidFormat')"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              stripe
              :data="iccidFormat.tableData"
              height="335"
              max-height="335"
              border
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in iccidFormat.columnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-if="column.visiable == '1' || column.visiable == 1"
                  :label="column.columnName"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'iccidFormat');
                    }
                  "
                  :total="iccidFormat.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'iccidFormat');
                    }
                  "
                  :current-page.sync="iccidFormat.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="iccidFormat.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <span class="title">根据ICCID查询MCA列表</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fl-right">
              <el-button
                size="small"
                type="primary"
                @click="loadTableData('mcaList')"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              stripe
              :data="mcaList.tableData"
              height="335"
              max-height="335"
              border
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in mcaList.columnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-if="column.visiable == '1' || column.visiable == 1"
                  :label="column.columnName"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'mcaList');
                    }
                  "
                  :total="mcaList.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'mcaList');
                    }
                  "
                  :current-page.sync="mcaList.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="mcaList.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <span class="title">根据ICCID查询生产任务</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fl-right">
              <el-button
                size="small"
                type="primary"
                @click="loadTableData('cardProduceIccid')"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              stripe
              :data="cardProduceIccid.tableData"
              height="335"
              max-height="335"
              border
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in cardProduceIccid.columnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-if="column.visiable == '1' || column.visiable == 1"
                  :label="column.columnName"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'cardProduceIccid');
                    }
                  "
                  :total="cardProduceIccid.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'cardProduceIccid');
                    }
                  "
                  :current-page.sync="cardProduceIccid.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="cardProduceIccid.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <span class="title">根据ICCID查询相关文件</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fl-right">
              <el-button
                size="small"
                type="primary"
                @click="loadTableData('operateFileIccid')"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              stripe
              :data="operateFileIccid.tableData"
              height="335"
              max-height="335"
              border
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in operateFileIccid.columnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  width="440"
                  v-if="
                    column.columnCode == 'fileName' &&
                    (column.visiable == '1' || column.visiable == 1)
                  "
                  :label="column.columnName"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <div
                      class="fxrow fxcc"
                      style="display: flex; justify-content: space-between"
                    >
                      <el-popover placement="right" width="330" trigger="hover">
                        <span>{{ scope.row.fileName }}</span>
                        <span
                          slot="reference"
                          style=""
                          >{{ scope.row.fileName }}</span
                        >
                      </el-popover>
                      <a
                        :href="scope.row.fileUrl"
                        :download="scope.row.fileName"
                      >
                        <i
                          class="el-icon-download"
                          style="cursor: pointer; font-size: 14px"
                        ></i>
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  v-else-if="
                    column.columnCode !== 'fileName' &&
                    (column.visiable == '1' || column.visiable == 1)
                  "
                  :label="column.columnName"
                  show-overflow-tooltip
                >
                </el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'operateFileIccid');
                    }
                  "
                  :total="operateFileIccid.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'operateFileIccid');
                    }
                  "
                  :current-page.sync="operateFileIccid.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="operateFileIccid.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 表单区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>

<script>
import haihangupload from "./haihang_upload";
export default {
  data() {
    return {
      orderList: [
        {
          name: "正序",
          code: "asc",
        },
        {
          name: "非正序",
          code: "desc",
        },
      ],
      types: ["iccidFormat", "mcaList", "cardProduceIccid", "operateFileIccid"],
      // 筛选条件
      baseParampters: {
        iccid: "",
        iccidType: "asc",
      },
      iccidFormat: {
        columnData: [],
        tableData: [],
        url: "",
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        totalCount: 0, //总记录数
      },
      mcaList: {
        columnData: [],
        tableData: [],
        url: "",
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        totalCount: 0, //总记录数
      },
      cardProduceIccid: {
        columnData: [],
        tableData: [],
        url: "",
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        totalCount: 0, //总记录数
      },
      operateFileIccid: {
        columnData: [],
        tableData: [],
        url: "",
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        totalCount: 0, //总记录数
      },
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 表单校验规则
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      // 表单只读状态
      readOnly: false,
      //字典集
      dicts: {},
      tableLoading: true,
      tableData: [],
      columnData: [],
      operateFileTableData: [],
      operateColunmnData: [],
      spNo: "",
      canSelDnseg: false, //未选择省市时，不可以选择号段
      canChoseCity: false,
      cardNumTol: 0,
      ispList: [],
      rightButton: [
        //TODO:待开发功能模块
        {
          id: 4,
          tag: "cardApplyBatch_button_exportDetail",
          name: "重试导入mobile",
          method: "toRetryImport",
          type: "primary",
        },
      ],
    };
  },
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.types.forEach((element) => {
        this.loadColumnData(element);
      });
    },
    loadIccid() {
      let iccid = this.iccid.replace(/\n/g, ",").replace(/,$/gi, "");
      this.$axios
        .post(
          `/herp/iccidType/${this.parampters.iccidType}/iccid/`,
          { iccid },
          {
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
          }
        )
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.iccidList = data.data.list;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 加载资源管理表格的表头
     */
    loadColumnData(tableName) {
      this.tableLoading = true;
      this.$axios
        .get(`/herp/table/${tableName}/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          this.tableLoading = false;
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this[tableName].columnData = data.data;
            console.log(tableName, this[tableName].columnData);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },
    //加载表格数据
    loadTableData(tableName) {
      let iccid = this.baseParampters.iccid
        .replace(/\n/g, ",")
        .replace(/,$/gi, "");
      let { totalCount, pageRows, pageIndex } = this[tableName];

      if (tableName == "iccidFormat") {
        this[
          tableName
        ].url = `/herp/iccidType/${this.baseParampters.iccidType}/iccid/`;
      } else if (tableName == "mcaList") {
        this[
          tableName
        ].url = `/herp/iccidType/${this.baseParampters.iccidType}/mca/`;
      } else if (tableName == "cardProduceIccid") {
        this[
          tableName
        ].url = `/herp/iccidType/${this.baseParampters.iccidType}/cardProduce/`;
      } else if (tableName == "operateFileIccid") {
        this[
          tableName
        ].url = `/herp/iccidType/${this.baseParampters.iccidType}/operateFile/`;
      }
      this.$axios
        .post(
          this[tableName].url,
          { iccid },
          {
            params: {
              pageRows,
              pageIndex,
            },
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
          }
        )
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this[tableName].tableData = data.data.list;
            this[tableName].totalCount = data.data.count;
            this[tableName].pageIndex = data.data.pageNum;
            this[tableName].pageRows = data.data.pageSize;
            console.log("tag", this[tableName].tableData);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //一键查询
    loadAllData() {
      if (this.baseParampters.iccid !== "") {
        this.types.forEach((element) => {
          this.loadTableData(element);
        });
      } else {
        this.$message("请输入ICCID!");
        return;
      }
    },
    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val, type) {
      this[type].pageIndex = val;
      this.loadTableData(type);
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val, type) {
      this[type].pageRows = val;
      this.loadTableData(type);
    },
  },
};
</script>
